<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>聊天室</title>

</head>
<body>
聊天消息内容:
<br/>
<textarea id="chat_content" readonly style="height: 400px;width: 600px"></textarea>
<br/>输入框:
<br/>
<div>
  <textarea id="in_content" placeholder="请输入内容" style="height: 100px;width: 500px"></textarea>
</div>
<button type="button" id="btn_send">发送消息</button>
<br/><br/>
<label>用户:</label>
<div>
  <input type="text" id="in_name" placeholder="请输入姓名"/>
</div>
<br/>
<button type="button" id="btn_join">进入聊天室</button>
<button type="button" id="btn_quit">离开聊天室</button>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(function () {
        var socketUrl = "ws://localhost:8080/SpringBootWebSocket";
        var ws = null;
        $("#btn_join").click(function () {
            if (ws != null) {
                alert("用户[" + $("#in_name").val() + "]已加入连接");
                return;
            }
            // 判断当前浏览器是否支持WebSocket
            if ('WebSocket' in window) {
                ws = new WebSocket(socketUrl)
            } else {
                alert("当前浏览器不支持WebSocket");
            }
            // 建立连接
            ws.onopen = function (event) {
                console.log('与服务器建立连接');
                ws.send("您的好友[" + $("#in_name").val() + "]上线了");
            }
            // 接收服务端返回给前端的消息
            ws.onmessage = function (event) {
                $("#chat_content").append(event.data + "\n");
            }

            // 连接关闭
            ws.onclose = function () {
                console.log("与服务器断开连接")
                $("#chat_content").append("用户[" + $("#in_name").val() + "]离开聊天室" + "\n");
                $("#in_name").val("");
            }
        });

        //发送消息
        $("#btn_send").click(function () {
            if (ws == null) {
                alert("该用户不在线");
                return;
            }
            var msg = $("#in_content").val();
            ws.send("用户[" + $("#in_name").val() + "]：" + msg);

        })
        // 离开聊天室
        $("#btn_quit").click(function () {
            ws.send("用户[" + $("#in_name").val() + "]离开聊天室!");
            $("#in_content").val("");
            ws.close();
        })
    })
</script>
</body>
</html>